<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
    <link rel="stylesheet" href="../../../admin/css/reset.css"/>
</head>

<body class="pear-container">

<!-- 顶部查询表单 -->
<!--<div class="layui-card">-->
<!--    <div class="layui-card-body">-->
<!--        <form class="top-search-from layui-form" action="">-->
<!--            <div class="layui-form-item layui-inline">-->
<!--                <label class="layui-form-label">名称</label>-->
<!--                <div class="layui-input-inline">-->
<!--                    <input type="text" name="role_name" placeholder="" class="layui-input layui-input-sm" autocapitalize="off">-->
<!--                </div>-->
<!--            </div>-->

<!--            &lt;!&ndash;按钮部分&ndash;&gt;-->
<!--            <div class="layui-form-item layui-inline">-->
<!--                <label class="layui-form-label"></label>-->
<!--                <button class="pear-btn pear-btn-md pear-btn-sm pear-btn-primary layui-btn-sm" lay-submit lay-filter="table-query">-->
<!--                    <i class="layui-icon layui-icon-search"></i>查询-->
<!--                </button>-->
<!--                <button type="reset" class="pear-btn pear-btn-md layui-btn-sm" lay-submit lay-filter="table-reset" permission="setting/user/insert">-->
<!--                    <i class="layui-icon layui-icon-refresh"></i>重置-->
<!--                </button>-->
<!--                &lt;!&ndash;收缩按钮&ndash;&gt;-->
<!--                <div class="layui-inline toggle-btn" style="margin-left: 5px;">-->
<!--                    <a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>-->
<!--                    <a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>-->
<!--                </div>-->
<!--            </div>-->
<!--        </form>-->
<!--    </div>-->
<!--</div>-->

<!--数据表格-->
<div class="layui-card">
    <div class="layui-card-body">
        <table id="data-table" lay-filter="data-table"></table>
    </div>
</div>

<!--表格头部按钮-->
<script type="text/html" id="data-toolbar">
    <button class="pear-btn pear-btn-primary  pear-btn-sm" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
    <button class="pear-btn pear-btn-success pear-btn-sm" lay-event="expandAll">
        <i class="layui-icon layui-icon-spread-left"></i>
        展开
    </button>
    <button class="pear-btn pear-btn-success pear-btn-sm" lay-event="foldAll">
        <i class="layui-icon layui-icon-shrink-right"></i>
        折叠
    </button>
</script>

<!--操作栏按钮-->
<script type="text/html" id="permission-bar">
    <button class="pear-btn pear-btn-primary pear-btn-xs pear-btn-sm" lay-event="edit"><i
        class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-xs pear-btn-sm" lay-event="remove"><i
        class="layui-icon layui-icon-delete"></i></button>
</script>

<script type="text/html" id="permission-type">
    {{#if (d.type == 0) { }}
    <span>目录</span>
    {{# }else if(d.type == 1){ }}
    <span>菜单</span>
    {{# }else if(d.type == 2){ }}
    <span>API</span>
    {{# } }}
</script>

<script type="text/html" id="permission-status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status"
           {{ d.status== true ? 'checked' : '' }} />
</script>

<script type="text/html" id="icon">
    <i class="layui-icon {{d.icon}}"></i>
</script>


<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script src="../../../lms/base64.js"></script>
<script src="../../../lms/common.js"></script>
<script src="../../../lms/permission.js"></script>
<script src="../../../lms/config.js"></script>


<script>
    const PRIMARY_KEY = "id";
    const SELECT_API = lms_config.api_url + "/api/setting/permission/select";
    const UPDATE_API = lms_config.api_url + "/api/setting/permission/update";
    const DELETE_API = lms_config.api_url + "/api/setting/permission/delete";


    if (!checkLogin()) {
        location.href = lms_config.base_path + "/login.html";
    }


    layui.use(['table', 'form', 'jquery', 'treetable', 'common'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let treetable = layui.treetable;
        let common = layui.common;


        let MODULE_PATH = "";


        window.render = function (where) {

            $request({
                url: SELECT_API,
                type: 'GET',
                dataType: 'json',
            }).then(function (ret) {
                for (let item in ret.data) {
                    ret.data[item].permissionCode = ret.data[item].unique_auth;
                    ret.data[item].parentId = ret.data[item].pid;
                }

                treetable.render({
                    elem: '#data-table',
                    treeColIndex: 1,
                    treeSpid: 0,
                    treeIdName: 'id',
                    treePidName: 'pid',
                    skin: 'line',
                    size: 'sm',
                    treeDefaultClose: true,
                    toolbar: '#data-toolbar',
                    page: false,
                    cols: [
                        [{
                            type: 'checkbox'
                        },
                            {
                                title: '名称',
                                field: 'name',
                                minWidth: 200,
                            },
                            {
                                title: '图标',
                                field: 'icon',
                                templet: '#icon',
                                width: 60,
                                align: 'center',
                            },
                            {
                                title: '类型',
                                field: 'type',
                                templet: '#permission-type',
                                width: 60,
                                align: 'center',
                            },
                            {
                                title: 'api',
                                field: 'api_path',
                            },
                            {
                                title: '方法',
                                field: 'methods',
                            },
                            {
                                title: '菜单',
                                field: 'menu_path',
                            },
                            {
                                title: 'Auth',
                                field: 'unique_auth',
                            },
                            {
                                title: '排序',
                                field: 'sort',
                                width: 60,
                            },
                            {
                                title: '启用',
                                field: 'status',
                                templet: '#permission-status',
                                width: 100,
                                align: 'center',
                            },
                            {
                                title: '操作',
                                templet: '#permission-bar',
                                width: 120,
                                align: 'center',
                            }
                        ]
                    ],
                    data: ret.data,
                });

            }).catch(function (ret) {
                layer.msg("出错[" + ret.status + "]：" + ret.responseText, {
                    icon: 2,
                    //icon: 5,
                    time: 1000
                });
            });
        }
        window.render();


        //弹出窗设置 自己设置弹出百分比
        function screen() {
            if (typeof width !== 'number' || width === 0) {
                width = $(window).width() * 0.8;
            }
            if (typeof height !== 'number' || height === 0) {
                height = $(window).height() - 20;
            }
            return [width + 'px', height + 'px'];
        }

        table.on('tool(data-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        })


        table.on('toolbar(data-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            } else if (obj.event === 'expandAll') {
                treetable.expandAll("#data-table");
            } else if (obj.event === 'foldAll') {
                treetable.foldAll("#data-table");
            }
        });

        window.add = function () {
            layer.open({
                type: 2,
                maxmin: true,
                title: '新增',
                shade: 0.1,
                area: screen(),
                content: MODULE_PATH + 'add.html?operation=add'
            });
        }

        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: screen(),
                content: MODULE_PATH + 'add.html?operation=edit&id=' + obj.data.id +
                    '&type=' + obj.data.type +
                    '&show=' + obj.data.show +
                    '&status=' + obj.data.status +
                    '&name=' + encodeURI(encodeURI(obj.data.name)) +
                    //'&parent_name=' + obj.data.parent_name +
                    '&pid=' + obj.data.pid +
                    '&methods=' + obj.data.methods +
                    '&api_path=' + obj.data.api_path +
                    '&menu_path=' + obj.data.menu_path +
                    '&icon=' + obj.data.icon +
                    '&sort=' + obj.data.sort
            });
        }
        window.remove = function (obj) {
            layer.confirm('确定要删除该权限', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: DELETE_API,
                    type: 'POST',
                    data: {"data": obj.data['id']},
                    dataType: 'json',
                    success: function (ret) {
                        layer.close(loading);
                        if (ret && ret.code == 0) {
                            layer.msg(ret.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(ret.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    },
                    error: function (ret) {
                        alert("出错" + ret.status + "：" + ret.responseText);
                    }, //表示如果请求响应出现错误，会执行的回调函数
                });
            });
        }

        window.batchRemove = function (obj) {

            //方法1：直接获得所有选择的ID
            let checkIds = common.checkField(obj, 'id');
            if (checkIds === "") {
                layer.msg("未选中数据", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }

            layer.confirm('确定要删除这些权限', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: DELETE_API,
                    type: 'POST',
                    data: {"data": checkIds},
                    dataType: 'json',

                    success: function (ret) {
                        layer.close(loading);
                        if (ret && ret.code == 0) {
                            layer.msg(ret.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                window.render();
                            });
                        } else {
                            layer.msg(ret.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    },
                    error: function (ret) {
                        alert("出错" + ret.status + "：" + ret.responseText);
                    }, //表示如果请求响应出现错误，会执行的回调函数
                });
            });
        }

        window.refresh = function () {
            window.render();
        }


        form.on('submit(table-query)', function (data) {
            if (!data.field.name)
                delete data.field.name;
            let where = "";
            for (let k in data.field)
                where += k + '=' + data.field[k] + "&";

            window.render(where);
            return false;
        });


        form.on('switch(status)', function (data) {
            let status = data.elem.checked ? 1 : 0;
            let id = this.value;
            let load = layer.load();
            $.ajax({
                url: UPDATE_API,
                type: 'POST',
                data: {status: status, id: id},
                dataType: 'json',

                success: function (ret) {
                    layer.close(load);
                    if (ret && ret.code == 0) {
                        layer.msg(ret.msg, {
                            icon: 1,
                            time: 1500
                        });
                    } else {
                        layer.msg(ret.msg, {
                            icon: 2,
                            time: 1500
                        }, function () {
                            $(data.elem).prop('checked', !$(data.elem).prop('checked'));
                            form.render();
                        });
                    }
                },
                error: function (ret) {
                    alert("出错" + ret.status + "：" + ret.responseText);
                }, //表示如果请求响应出现错误，会执行的回调函数
            });
        });
    })
</script>
</body>

</html>
